<!-- 个人主页进入的博客页 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
    <link rel="stylesheet" href="editor.md/css/editormd.min.css">
</head>
<body>
<!-- 导航栏 -->
<div class="nav">

    <!-- <img src="image/img1.jpg" alt="加载失败" > -->
    <img src="image/img1.jpg" alt="图片加载失败">
    <span class="title">筱的博客</span>
    <a href="blog_list.html">个人主页</a>
    <!-- 此标签用于占位 分隔 -->
    <div class="spacer"></div>

    <a href="blog_drafts.html">草稿箱</a>
    <a href="blog_edit.html">写博客</a>
    <!-- 跳转到对应后台 实现删除 会话里的值 -->
    <!--    <a href="user/logout">注销</a>-->
    <!--    单击执行 logout方法-->
    <a href="javascript:logout()">注销</a>
</div>

<!-- 页面主体 -->
<div class="container">
    <!-- 左侧信息 -->
    <div class="container-left">

        <!-- .card 盒子 表示用户信息 -->
        <div class="card">
            <img src="" alt="">
            <!-- <h3>筱</h3> -->
            <!-- 根据指定文章显示对应用户名 -->
            <h3>

            </h3>


            <div class="counter">
                <span>文章数</span>
                <span>获赞数</span>
            </div>
            <div class="counter">
                <span class="count"></span>
                <span class="likecount"></span>
            </div>
        </div>
        <div class="option">

            <button class="del">删除博客</button>
            <button class="mod">修改博客</button>
        </div>

        <div class="comments">
            <div class="message"> 当前文章暂无评论~</div>
            <!--            <p class="comment"> 张三(2020-1-2 12:00:00): 从今天起,我要认真写博客!!!从今天起,我要认真写博客!!!</p>-->
            <!--            <button class="del">删除评论↑ </button>-->
            <!--            <p class="comment"> 张三(2020-1-2 12:00:00): 非常棒!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!~~~~</p>-->

            <!--            <p class="comment"> 张三(2020-1-2 12:00:00): 从今天起,我要认真写博客!!!从今天起,我要认真写博客!!!</p>-->
            <!--            <p class="comment"> 张三(2020-1-2 12:00:00): 从今天起,我要认真写博客!!!从今天起,我要认真写博客!!!</p>-->
            <!--&lt;!&ndash;            <p class="mes">李四(2020-1-2 12:00:00):从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!&ndash;&gt;-->
            <!--&lt;!&ndash;            </p>&ndash;&gt;-->
            <!--            <p class="comment">李四(2020-1-2 12:00:00):从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!-->
            <!--            </p>-->
            <!--            <p class="mes">李四(2020-1-2 12:00:00):从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!-->
            <!--            </p>-->
        </div>
        <input type="text" class="mes" placeholder="在此处写下评论">
        <button class="send">发送</button>

    </div>

    <!-- 详情页 右侧信息 -->
    <div class="container-right">
        <!-- 博文 -->
        <!-- 内部标签元素的内容需要动态填充  高度100%使blog容器高度和父类元素一样-->
        <div class="blog" style="height: 100%;">
            <!-- 标题 -->
            <h2 class="title">


            </h2>


            <!-- 日期 -->
            <div class="date">
            </div>
            <div class="desc">
                <span class="rcount"></span>
                <span class="likedcount"></span>
                <span class="collectcount"></span>
                <span class="commentcount"></span>
            </div>
            <!--  类名换成id 用于给editor.md进行识别   给这个存放博文的盒子 设上高度(根据父类元素100%减去其他元素的高度 自适应) 背景色 圆角矩形 溢出滚动条-->
            <div id="content"
                 style="height:calc(100% - 90px) ;  background-color: rgba(255,255,255,0.5); border-radius: 10px; overflow: auto;">

                <!-- <p>从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!
                    从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!
                    从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!
                </p>

               <p>从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!
                从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!
                从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!
               </p>

               <p>从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!
                从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!
                从今天起,我要认真写博客!!! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore fugiat officiis porro est minus rem, excepturi tempore itaque ducimus quidem nobis molestias. Obcaecati quam aperiam perspiciatis? Dolorum aspernatur velit quia!
               </p> -->

            </div>

        </div>
    </div>
</div>


<!-- 引入jquer源码 -->
<script src="js/jquery.js"></script>
<!-- 引入 editor.md依赖 -->
<!-- 引入的是 导入的editor.md包里的指定目录下 css 和js代码 -->
<link rel="stylesheet" href="editor.md/css/editormd.min.css">
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script>
<script>

    let likednum=0;

    let commentCount=0;
    // 获取博文内容
    let getContent = function () {
        $.ajax({
            type: 'get',
            //  访问指定的 后端路径 带上当前页面的queryString 通过浏览器提供的全局变量 location.search获取
            url: '/article/showmyarticle' + location.search,
            success: function (body) {
                if (body != null && body.code == 200 && body.data != null) {
                    // 根据对应的标签元素向里面填充 获取过来的数据
                    let title = document.querySelector('.blog .title');
                    title.innerHTML = body.data.title;
                    let date = document.querySelector('.date');
                    date.innerHTML = "发布时间: " + body.data.updatetime;
                    //&nbsp 表示空格

                    let rcount = document.querySelector('.rcount');
                    rcount.innerHTML = "&nbsp阅读量: " + body.data.rcount;

                    let liked = document.querySelector(".blog .likedcount");


                    liked.innerHTML = "&nbsp获赞数: " + body.data.likedcount;
                    likednum=body.data.likedcount;
                    let collected = document.querySelector(".blog .collectcount");
                    collectCount = body.data.collection_count;
                    collected.innerHTML = "&nbsp收藏数: "+body.data.collection_count;

                    let commentcount = document.querySelector('.blog .commentcount');
                    commentCount=body.data.commentcount;
                     commentcount.innerHTML = "&nbsp评论数: "+body.data.commentcount;
                    // 博客正文
                    //注意正文填充需要以md展示格式填充而不是编写格式 'content'对应id为content的盒子 表示里面放 根据markdown转换的 指定的 数据
                    editormd.markdownToHTML('content', {markdown: body.data.content});
                } else {
                    alert(body.msg);
                    // 出现异常 没有获取到正文 则返回登录页
                    location.assign("blog_login.html");
                }

                //
                //     // 博客正文
                //     //注意正文填充需要以md展示格式填充而不是编写格式 'content'对应id为content的盒子 表示里面放 根据markdown转换的 指定的 数据
                //     editormd.markdownToHTML('content', {markdown: body.content});
                // }

            }

        });
    };

    getContent();


    // 获得个人信息
    function getauthorMessage() {
        // 通过ajax发送 带querystring(url处) 的get请求
        $.ajax({
            url: '/user/showuser',
            type: 'get',
            success: function (body) {
                // 判断登录状态 如果body为null 说明会话里的用户信息没有
                if (body != null && body.code == 200 && body.data != null) {
                    let profile=document.querySelector('.card img');
                    profile.src=body.data.photo;
                    let name = document.querySelector('.card h3');
                    name.innerHTML = body.data.username;
                    let count = document.querySelector('.counter .count');
                    count.innerHTML = body.data.blogCount;
                    let likedcount = document.querySelector('.likecount');
                    likedcount.innerHTML = body.data.liked;

                    getcomments();
                } else {
                    alert(body.data.msg);
                    location.assign('blog_login.html');
                }
            }
        });
    }

    getauthorMessage();


    // 删除博文 请求和响应处理
    let delbutton = document.querySelector('.del');
    delbutton.onclick = function () {
        if (confirm("您确定要删除此文章嘛?")) {
            // let likedcount = document.querySelector('.likedcount');
            console.log(likednum);
            $.ajax({
                url: 'article/del' ,
                type: 'post',
                data:{"id":location.search.substring(4),

                "state":1},

                success: function (body) {
                    if (body != null && body.code == 200 && body.data == 1) {
                        alert('已删除该博文~');
                        location.assign('blog_list.html');
                    } else {
                        alert('当前操作异常!')
                        location.assign('blog_list.html');
                    }
                }
            });
        }

    };
    // 修改博文
    let modbutton = document.querySelector('.mod');
    modbutton.onclick = function () {
        location.assign("blog_modify.html" + location.search);
    };


    let ret=1
    // 添加评论
    let send=document.querySelector('.send');
    window.onkeydown=function(ev){  // 回车发送评论
        if(ev.keyCode==13){
            let message=document.querySelector('.mes');

            if(message.value.length>0){
                send.onclick();
            }else {
                message.focus();
            }
        }
    }
    send.onclick=function (){
        let message=document.querySelector('.mes');

        let comment={
            bid: location.search.substring(4),
            message: message.value
        }
        if(message.value==null||message.value==''){
            alert('评论失败,内容不能为空');
            return;
        }else if(message.value.length>=100){
            alert('评论失败,评论内容过长');
            return;
        }


        $.ajax({
            url:'/article/addcomment',
            type:'post',
            data:JSON.stringify(comment),
            contentType: 'application/json ; charset=UTF-8',
            success:function (body){
                if(body!=null&&body.code==200&&body.data!=null){

                    //  发布成功后 修改前端页面 添加当前评论
                    let comments=document.querySelector('.comments');
                    if(ret==1){ // 添加评论时如果 有默认信息没删除 则删除
                        comments.removeChild(document.querySelector('.message'));
                        ret=0;
                    }
                    let comment=document.createElement('p');
                    comment.className='comment';
                    comment.innerHTML=body.data.username+'('+body.data.time+')'+':&nbsp;'+message.value;
                    let del=document.createElement('button');
                    del.innerHTML='删除评论↑'
                    del.value= body.data.cid;
                    setdel(del);
                    comments.insertBefore(del,comments.children[0]);
                    comments.insertBefore(comment,comments.children[[0]]);
                    // comments.appendChild(comment);
                    message.value='';
                    let commentcount= document.querySelector('.blog .commentcount');
                    commentCount+=1;
                    commentcount.innerHTML = "&nbsp评论数: "+commentCount;
                }else{
                    alert('评论发布失败:'+body.msg);
                }
            }
        });
    }

    // 加载当前博文的评论
    function getcomments(){

        let name = document.querySelector('.card h3');

        $.ajax({

            url: 'article/showComments'+location.search+'&name='+name.innerHTML,
            type: 'get',
            success:function (body){
                if(body!=null &&body.code == 200 && body.data!=null){
                    // 加载评论前 把默认信息删除

                    let commentsDiv=document.querySelector('.comments');

                    for(let x of body.data){
                        if(ret==1){
                            commentsDiv.removeChild(document.querySelector('.message'));
                            ret=0;
                        }
                        let comment=document.createElement('p');
                        comment.className='comment';
                        comment.innerHTML=x.username+'('+x.time+')'+':&nbsp;'+x.message;
                        commentsDiv.appendChild(comment);
                        if(x.isdel){
                            let del=document.createElement('button');
                            del.innerHTML='删除评论↑'
                            del.value= x.cid;
                            setdel(del);
                            commentsDiv.appendChild(del);

                        }
                        // console.log(Array.prototype.indexOf.call(commentsDiv.children,comment));
                    }

                }

            }
        });
    }

    // 给按钮添加 鼠标单击删除事件
    function setdel(del){

        del.onclick=function (){
            let name = document.querySelector('.card h3');
            if(confirm('确定要删除此评论嘛?')){
                $.ajax({
                    type:'post',
                    url:'/article/delcomment'+location.search+'&cid='+del.value+'&name='+name.innerHTML,
                    success:function (body){
                        if(body!=null&&body.code==200&&body.data!=null){
                            alert('删除评论成功');
                            //  删除页面元素
                            let comments=document.querySelector('.comments');
                            // 获取其在父类元素的下标
                            let index=Array.prototype.indexOf.call(comments.children,del);
                            // 删除指定下标的子类元素
                            comments.removeChild(comments.children[index]);
                            comments.removeChild(comments.children[index-1]);
                            // 减少评论数
                            commentCount-=1;
                            let commentcount= document.querySelector('.blog .commentcount');
                            commentcount.innerHTML = "&nbsp评论数: "+commentCount;
                            //location.assign('blogs_detail.html'+location.search);
                        }else{
                            alert('删除评论失败!');
                        }
                    }
                });
            }

        }
    }
    // function setdel(del){
    //     del.onclick=function (){
    //         let name = document.querySelector('.card h3');
    //         if(confirm('确定要删除此评论嘛?')){
    //             $.ajax({
    //                 type:'post',
    //                 url:'/article/delcomment'+location.search+'&cid='+del.value+'&name='+name.innerHTML,
    //                 success:function (body){
    //                     if(body!=null&&body.code==200&&body.data!=null){
    //                         alert('删除评论成功');
    //                         location.assign('blog_detail.html'+location.search);
    //                     }else{
    //                         alert('删除评论失败!');
    //                     }
    //                 }
    //             });
    //         }
    //
    //     }
    // }


    function logout() {
        if (confirm("您确定要退出登录嘛?")) {
            $.ajax({
                url: "/user/logout",
                type: "post",
                data: {},
                success: function (rel) {
                    if (rel.code == 200) {
                        alert("Bye~");
                        location.assign("blog_login.html");
                    }
                }
            });
        }
    }
</script>

</body>
</html>